<template>
	<view class="padding-30">
		<view class="padding-30 bg-fff border-radius20 margin-bottom30" v-for="(item,index) in list" :key="index">
			<view class="flex-alignItems-center padding-bottom30 f-divider1 margin-bottom30">
				<view class="flex-justAliCenter-column flex1">
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-18 color-000 margin-right10">{{item.pressure_shou}}</view>
						<view class="list-icon flex-center">{{item.tag}}</view>
					</view>
					<view class="fontSize-15 color-999">收缩压</view>
				</view>
				<view class="flex-justAliCenter-column flex1">
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-18 color-000 margin-right10">{{item.pressure_shu}}</view>
						<!-- <view class="list-icon flex-center">高血压</view> -->
					</view>
					<view class="fontSize-15 color-999">舒张压</view>
				</view>
				<view class="flex-justAliCenter-column flex1">
					<view class="flex-alignItems-center margin-bottom30">
						<view class="fontSize-18 color-000 margin-right10">{{item.heart_rate}}</view>
						<!-- <view class="list-icon flex-center">高血压</view> -->
					</view>
					<view class="fontSize-15 color-999">心率</view>
				</view>
			</view>
			<view class="flex-between">
				<view class="fontSize-15 color-999">记录时间：{{item.createtime}}</view>
				<image @click="deletePressure(item.id)" class="img-44" src="../../../../static/image/13.png" mode=""></image>
			</view>
		</view>
		<u-empty v-if="list.length == 0"
		        mode="list"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
				width="150px"
				height="150px"
				text="列表为空"
				textSize="18"
		>
		</u-empty>
		<view style="padding-bottom: 100rpx;">
			<u-loadmore v-if="loading" status="loading" />
			<u-loadmore v-if="isLastPage" status="nomore" />
		</view>


		<!-- 底部操作栏 -->
		<view style="height: 200rpx;"></view>
		<view class="position-fixed-bottom padding-30 bg-fff">
			<view class="btn50-0165FD-15ffffff flex-center" @click="bloodShow = true">
				添加血压记录
			</view>
		</view>
		
		<!-- 记录血压 -->
		<u-popup :show="bloodShow" :round="20" @close="bloodShow = false" closeable>
			<view class="popup-view">
				<view class="fontSize-15 color-000 margin-bottom30">记录血压</view>
				<view class="input-item-view flex-alignItems-center margin-bottom30">
					<view class="fontSize-15 color-000">收缩压/高压(mmHg)</view>
					<input type="text" class="input-view" v-model="pressure_shou" placeholder="请输入" />
				</view>
				<view class="input-item-view flex-alignItems-center margin-bottom30">
					<view class="fontSize-15 color-000">舒张压/低压(mmHg)</view>
					<input type="text" class="input-view" v-model="pressure_shu" placeholder="请输入" />
				</view>
				<view class="input-item-view flex-alignItems-center margin-bottom30">
					<view class="fontSize-15 color-000">心率(bmp)</view>
					<input type="text" class="input-view" v-model="heart_rate" placeholder="请输入" />
				</view>
				<view class="input-item-view flex-between">
					<view class="fontSize-15 color-000">实际检测时间</view>
					<view class="flex-alignItems-center" @click="pressureDateShow = true">
						<view class="fontSize-15 color-000 margin-right10" v-if="pressureDateName">{{pressureDateName}}</view>
						<view class="fontSize-15 color-999 margin-right10" v-else>请选择</view>
						<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
					</view>
				</view>
				<view class="btn50-0165FD-15ffffff flex-center margin-top150" @click="subHealthPressureAdd">
					提交
				</view>
			</view>
		</u-popup>
		<!-- 实际检测时间 -->
		<u-datetime-picker  :maxDate="Number(new Date())" :show="pressureDateShow" v-model="pressureDateValue" mode="datetime" @cancel="pressureDateCancel" @confirm="pressureDateConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				list: [],
				isLastPage: false,
				loading: false,
				sick_id:'',
				// 记录血压
				bloodShow: false,
				// 血压
				// 实际检测时间弹窗
				pressureDateShow:false, //实际检测时间弹窗
				pressureDateValue:Number(new Date()), 
				pressureDateName:'',
				pressure_shou:'', // 收缩压(mmHg)
				pressure_shu:'',// 舒张压(mmHg)
				heart_rate:'',// 心率
				pressure_date:'',//血压检测时间,
			}
		},
		onShow() {
			this.page = 1
			this.limit = 10
			this.list = []
			if(uni.getStorageSync('patlient-item')){
				this.sick_id = uni.getStorageSync('patlient-item').id
				this.healthWeightList()
			}
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.isLastPage = false
			this.list = []
			this.healthWeightList().finally(() => {
				// 停止当前页面下拉刷新
				uni.stopPullDownRefresh();
			});
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.list.length >= this.page * this.limit) {
				this.isLastPage = false;
				this.page += 1;
				this.healthWeightList();
			} else {
				this.isLastPage = true
			}
		},
		methods: {
			// 确认实际检测时间
			pressureDateConfirm(e){
				this.pressureDateName = this.$T.timeFormat(e.value)
				this.pressureDateShow = false
			},
			// 取消实际检测时间
			pressureDateCancel(){
				this.pressureDateName = ''
				this.pressureDateShow = false
			},
			// 提交血压
			async subHealthPressureAdd(){
				if(!this.pressure_shou) return this.$tools.toast('请添加收缩压(mmHg)')
				if(!this.pressure_shu) return this.$tools.toast('请添加舒张压(mmHg)')
				if(!this.heart_rate) return this.$tools.toast('请添加心率')
				if(!this.pressureDateName) return this.$tools.toast('请选择实际检测时间')
				let form = {
					sick_id:this.sick_id,
					pressure_shou:this.pressure_shou,
					pressure_shu:this.pressure_shu,
					heart_rate:this.heart_rate,
					pressure_date:this.pressureDateName
				}
				let res = await this.$http.post(this.$api.health_pressure_add,form,{token:true})
				if(res.code == 1){
					this.$tools.toast('添加成功')
					this.pressure_shou = ''
					this.pressure_shu = ''
					this.heart_rate = ''
					this.pressureDateName = ''
					this.bloodShow = false
					this.page = 1
					this.limit = 10
					this.list = []
					this.healthWeightList()
				}
			},
			// 删除血压
			deletePressure(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除该血压记录',
					success: function(res) {
						if (res.confirm) {
							that.$http.post(that.$api.health_pressure_del, {
								sick_id:that.sick_id,
								id: id
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									that.page = 1
									that.limit = 10
									that.list = []
									that.healthWeightList()
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消删除',
								icon: 'none'
							})
						}
					}
				});
			},
			// 获取血压列表
			async healthWeightList() {
				let res = await this.$http.post(this.$api.health_pressure_list, {
					page: this.page,
					limit: this.limit,
					sick_id:this.sick_id
				}, {
					token: true
				})
				this.list = [...this.list, ...res.data]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-item-view {
		padding: 20rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 1rpx solid #DBDBDB;
	}
	
	.input-view {
		flex: 1;
		text-align: right;
		font-size: 15px;
	}
	.input-item1 {
		flex: 1;
		text-align: left;
		padding: 10rpx 20rpx;
	}
	.input-demo-item {
		padding: 10rpx 20rpx;
		background-color: #F7F7F7;
		border-radius: 10rpx;
	}
	
	.list-icon {
		min-width: 85rpx;
		padding: 5rpx 10rpx;
		height: 30rpx;
		font-size: 13px;
		color: #ffffff;
		border-radius: 5rpx;
		background-color: #0165FD;
	}
</style>